<template>
  <div id="videoDraw" class="videoDraw">
    <div id="videoMapView-container" v-show="videoMapShow"></div>
    <div class="selectType">
      <a-select :default-value="currentType" style="width: 120px" @change="handleChange">
        <a-select-option value="视频调绘"> 视频调绘 </a-select-option>
        <a-select-option value="地图调绘"> 地图调绘 </a-select-option>
      </a-select>
      <div class="sample-button-panel video-panel" v-show="currentType == '视频调绘'">
        <a-button type="primary" @click="startDrawPointOfVideo()">点</a-button>
        <a-button type="primary" @click="startDrawLineOfVideo()">线</a-button>
        <a-button type="primary" @click="startDrawPolygonOfVideo()">区</a-button>
        <a-button type="primary" @click="finishEditor()">完成</a-button>
        <a-button type="danger" @click="clearAll()">清除</a-button>
      </div>
      <div class="sample-button-panel map-panel" v-show="currentType == '地图调绘'">
        <a-button type="primary" @click="startAddPointOfMap()">点</a-button>
        <a-button type="primary" @click="startAddLineOfMap()">线</a-button>
        <a-button type="primary" @click="startAddPolygonOfMap()">区</a-button>
        <a-button type="danger" @click="clearAll()">清除</a-button>
      </div>
    </div>
    <szksButton class="goBtn" type="info" @onClick="go"> 指标页面 </szksButton>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ShelfIndex',
  computed: {
    ...mapGetters(['map']),
    mapReady() {
      return this.map.mapReady
    },
  },
  data() {
    return {
      currentType: '视频调绘',
      drawElement: undefined,
      mockData: undefined,
      videoMapShow: false,
      videoMapView: undefined,
      videoSketchEditor: undefined,
      graphicsLayer: null,
      pointOption: {
        show: true,
        pixelSize: 2,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 1,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
      },
      g3dIndex: null,
    }
  },

  mounted() {
    if (this.mapReady) {
      this.init()
    }
  },
  beforeDestroy() {
    this.clearAllGeoMetry()
    this.$map3DUtils.removeAllEntity()
  },
  watch: {
    mapReady(newVal) {
      if (newVal) {
        this.init()
      }
    },
  },

  methods: {
    go() {
      this.$router.push('/topState')
    },
    init() {
      this.addVideo()
      this.addDrawElement()

      // // pixelX: 744.9599999999999, // 控制点在图像上的像素坐标x分量
      // // pixelY: 168.0904533333333, // 控制点在图像上的像素坐标y分量
      // this.createPoint(114.40189179175361, 30.465992939350418, 0) // 花园内小径1

      // // pixelX: 547.1999999999999, // 控制点在图像上的像素坐标x分量
      // //  pixelY: 271.6782933333333, // 控制点在图像上的像素坐标y分量
      // this.createPoint(114.40201696007567, 30.46638409698472, 0) // 花园内小径4

      // // pixelX: 618.24, // 控制点在图像上的像素坐标x分量
      // // pixelY: 164.25386666666665, // 控制点在图像上的像素坐标y分量
      // this.createPoint(114.40206822528047, 30.46605646043939, 0) // 花园外道路1
    },
    createPoint(long, lat, height) {
      var Position = Cesium.Cartesian3.fromDegrees(long, lat, height)

      var viewer = window.component.viewer
      let entity = new Cesium.Entity({
        name: 'test',
        show: true,
        position: Position,
        point: {
          ...this.pointOption,
          clampToGround: true,
        },
      })
      viewer.entities.add(entity)
    },

    // 添加地图绘制工具
    addDrawElement() {
      this.drawElement = new window.Cesium.DrawElement(window.component.viewer)
      // 设置在绘制时贴地
      this.drawElement.setGroundPrimitiveType('TERRAIN')
    },
    // 打开视频调绘
    addVideo() {
      // 初始化视频标定数据mockData
      this.initMockData()
      let videoMap = new Zondy.Map()
      this.videoMapView = new Zondy.VideoMapView({
        viewId: 'videoMapView-container',
        map: videoMap,
      })
      // 初始化视频地图视图
      this.videoMapView.init(this.mockData)
      // 显示视频区域
      this.videoMapShow = true
      // 新建草图编辑器
      this.videoSketchEditor = new Zondy.VideoSketchEditor({
        mapView: this.videoMapView,
      })
      //通过video四个顶点，在地图上用虚线绘制视频区域
      this.addVideoArea()
      this.addModel()
    },

    addModel() {
      // this.setGlobleMap(false)
      const viewer = window.component.viewer
      // 加载倾斜摄影
      // viewer.scene.layers.appendM3DLayer(`http://115.223.34.32:8865/igs/rest/services/光山倾斜摄影/M3dServer`, {
      //   name: 'qxsy',
      //   duration: 2,
      //   autoReset: true, // 自动定位
      //   loaded: function () {
      //     viewer.scene.light.intensity = 16 // 处理比较暗的倾斜摄影
      //   },
      // })
      // this.showPosition(viewer)
      // console.log('G3DManager', viewer.scene.layers)
      if (this.g3dIndex) {
        window.webGlobe.scene.layers.removeG3DLayerByID(this.g3dIndex)
        this.g3dIndex = undefined
      }
      this.g3dIndex = viewer.scene.layers.appendG3DLayer(
        `http://13.11.100.22:6163/igs/rest/g3d/大姚县新街页岩砖厂2022`,
        {
          name: 'csmx',
          duration: 2,
          autoReset: true, // 自动定位
        },
      )

      setTimeout(() => {
        this.moveModel()
      })
    },
    moveModel() {
      const layer = window.component.viewer.scene._layers
      // 现在是存在_m3dLayersMap，之前为_sceneLayerMap，暂不删除，都保留
      const m3dLayer = layer._m3dLayersMap
      // console.log('m3dLayer', layer)
      if (m3dLayer !== undefined && m3dLayer._length > 0) {
        const mapObj = m3dLayer._obj
        // console.log('mapObj', mapObj)
        for (var index in mapObj) {
          this.moveModel2(mapObj[index], 'Z', -200)
        }
      }
      // tileset.modelMatrix = this.moveModel2(tileset, 'Z', -20)
      // tileset.modelMatrix = this.moveModel2(tileset, 'Y', 500)
      // tileset.modelMatrix = this.moveModel2(tileset, 'X', -180)
    },
    /**
     * 控制已经加载完成的模型进行位置移动
     * @param {Object} tileset 图层
     * @param {String} directionType 移动轴向类型，可选值为'X','Y','Z'
     * @param {Number} distance 在该轴上的移动距离
     * @returns matrix 移动结束后的转换矩阵
     */
    moveModel2(tileset, directionType, distance) {
      var transform = tileset.root.transform
      // 将原点坐标和方向点坐标转成世界坐标
      var originPoint = new Cesium.Cartesian3(0, 0, 0)
      Cesium.Matrix4.multiplyByPoint(transform, originPoint, originPoint)
      var directionPoint = new Cesium.Cartesian3()
      if (directionType === 'X') {
        directionPoint = new Cesium.Cartesian3(1.0, 0.0, 0.0)
      } else if (directionType === 'Y') {
        directionPoint = new Cesium.Cartesian3(0.0, 1.0, 0.0)
      } else if (directionType === 'Z') {
        directionPoint = new Cesium.Cartesian3(0.0, 0.0, 1.0)
      } else {
        directionPoint = new Cesium.Cartesian3(1.0, 0.0, 0.0)
      }
      Cesium.Matrix4.multiplyByPoint(transform, directionPoint, directionPoint)
      // 计算方向
      var direction = new Cesium.Cartesian3()
      Cesium.Cartesian3.subtract(directionPoint, originPoint, direction)
      Cesium.Cartesian3.normalize(direction, direction)
      // 移动距离
      Cesium.Cartesian3.multiplyByScalar(direction, distance, direction)
      // 将移动距离的向量添加到转换矩阵中
      transform[12] += direction.x
      transform[13] += direction.y
      transform[14] += direction.z
      var matrix = new Cesium.Matrix4()
      matrix = transform
      return matrix
    },

    // 初始化视频标定数据mockData
    initMockData1() {
      this.mockData = {
        videoID: 'zondy', // 视频id
        videoName: 'zondy_garden', // 视频名称
        // 视频源信息
        videoSource: {
          protocol: 'mp4', // 视频传输协议
          videoUrl: 'http://webclient.smaryun.com:8200/NoneSpatialData/video/zondy_garden.mp4', // 视频服务地址
          // videoUrl: 'rtmp://127.0.0.1:1935/live/hls' // 视频服务地址
          // videoUrl: 'http://webclient.smaryun.com:8200/NoneSpatialData/video/scenePro.m3u8' // 视频服务地址
        },
        // 视频配准参数
        videoRegistrationParam: {
          videoRegistrationType: '', // 视频配准的类型：几何多项式模型、有理函数数学模型、局部区域校正模型、卫星传感器模型
          calibrationParam: {
            // 标定配准参数
            groundControlPointList: [
              {
                id: 'GCP1', // 控制点标识
                description: '路弯外侧', // 控制点描述
                pixelX: 896.64, // 控制点在图像上的像素坐标x分量
                pixelY: 446.2429866666666, // 控制点在图像上的像素坐标y分量
                x: 114.40164113946422, // 控制点的地理坐标x分量
                y: 30.466590219808978, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP2', // 控制点标识
                description: '路弯内侧', // 控制点描述
                pixelX: 808.32, // 控制点在图像上的像素坐标x分量
                pixelY: 405.95882666666665, // 控制点在图像上的像素坐标y分量
                x: 114.40169366227067, // 控制点的地理坐标x分量
                y: 30.466554799756626, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP3', // 控制点标识
                description: '花园内道路1', // 控制点描述
                pixelX: 839.04, // 控制点在图像上的像素坐标x分量
                pixelY: 170.00874666666664, // 控制点在图像上的像素坐标y分量
                x: 114.40176655091467, // 控制点的地理坐标x分量
                y: 30.465983254331473, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP4', // 控制点标识
                description: '花园内道路2', // 控制点描述
                pixelX: 737.28, // 控制点在图像上的像素坐标x分量
                pixelY: 233.31242666666665, // 控制点在图像上的像素坐标y分量
                x: 114.4018273347862, // 控制点的地理坐标x分量
                y: 30.466208839683667, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP5', // 控制点标识
                description: '花园内道路3', // 控制点描述
                pixelX: 629.76, // 控制点在图像上的像素坐标x分量
                pixelY: 311.96245333333326, // 控制点在图像上的像素坐标y分量
                x: 114.40190659346297, // 控制点的地理坐标x分量
                y: 30.46645065731433, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP6', // 控制点标识
                description: '花园内道路4', // 控制点描述
                pixelX: 359.03999999999996, // 控制点在图像上的像素坐标x分量
                pixelY: 344.57343999999995, // 控制点在图像上的像素坐标y分量
                x: 114.40211147397734, // 控制点的地理坐标x分量
                y: 30.466598382883507, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP7', // 控制点标识
                description: '花园内道路5', // 控制点描述
                pixelX: 57.599999999999994, // 控制点在图像上的像素坐标x分量
                pixelY: 371.4295466666666, // 控制点在图像上的像素坐标y分量
                x: 114.40232548399688, // 控制点的地理坐标x分量
                y: 30.466748498130617, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP8', // 控制点标识
                description: '花园内小径1', // 控制点描述
                pixelX: 744.9599999999999, // 控制点在图像上的像素坐标x分量
                pixelY: 168.0904533333333, // 控制点在图像上的像素坐标y分量
                x: 114.40189179175361, // 控制点的地理坐标x分量
                y: 30.465992939350418, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP9', // 控制点标识
                description: '花园内小径2', // 控制点描述
                pixelX: 683.52, // 控制点在图像上的像素坐标x分量
                pixelY: 200.70144, // 控制点在图像上的像素坐标y分量
                x: 114.40192898490477, // 控制点的地理坐标x分量
                y: 30.46613512202163, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP10', // 控制点标识
                description: '花园内小径3', // 控制点描述
                pixelX: 637.4399999999999, // 控制点在图像上的像素坐标x分量
                pixelY: 225.6392533333333, // 控制点在图像上的像素坐标y分量
                x: 114.40196776994985, // 控制点的地理坐标x分量
                y: 30.466237705623186, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP11', // 控制点标识
                description: '花园内小径4', // 控制点描述
                pixelX: 547.1999999999999, // 控制点在图像上的像素坐标x分量
                pixelY: 271.6782933333333, // 控制点在图像上的像素坐标y分量
                x: 114.40201696007567, // 控制点的地理坐标x分量
                y: 30.46638409698472, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP12', // 控制点标识
                description: '花园内小径5', // 控制点描述
                pixelX: 399.35999999999996, // 控制点在图像上的像素坐标x分量
                pixelY: 283.1880533333333, // 控制点在图像上的像素坐标y分量
                x: 114.4021436510831, // 控制点的地理坐标x分量
                y: 30.466484759320235, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP13', // 控制点标识
                description: '花园内小径6', // 控制点描述
                pixelX: 299.52, // 控制点在图像上的像素坐标x分量
                pixelY: 296.61610666666667, // 控制点在图像上的像素坐标y分量
                x: 114.40223611073817, // 控制点的地理坐标x分量
                y: 30.466552606846683, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP14', // 控制点标识
                description: '花园内小径7', // 控制点描述
                pixelX: 122.88, // 控制点在图像上的像素坐标x分量
                pixelY: 313.88074666666665, // 控制点在图像上的像素坐标y分量
                x: 114.40236898366899, // 控制点的地理坐标x分量
                y: 30.466648994333596, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP15', // 控制点标识
                description: '花园外道路1', // 控制点描述
                pixelX: 618.24, // 控制点在图像上的像素坐标x分量
                pixelY: 164.25386666666665, // 控制点在图像上的像素坐标y分量
                x: 114.40206822528047, // 控制点的地理坐标x分量
                y: 30.46605646043939, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP16', // 控制点标识
                description: '花园外道路2', // 控制点描述
                pixelX: 577.92, // 控制点在图像上的像素坐标x分量
                pixelY: 183.43679999999998, // 控制点在图像上的像素坐标y分量
                x: 114.40209620617678, // 控制点的地理坐标x分量
                y: 30.466151993167, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP17', // 控制点标识
                description: '花园外道路3', // 控制点描述
                pixelX: 493.43999999999994, // 控制点在图像上的像素坐标x分量
                pixelY: 221.80266666666662, // 控制点在图像上的像素坐标y分量
                x: 114.40214557052504, // 控制点的地理坐标x分量
                y: 30.466316742758217, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP18', // 控制点标识
                description: '花园外道路4', // 控制点描述
                pixelX: 341.76, // 控制点在图像上的像素坐标x分量
                pixelY: 239.06730666666664, // 控制点在图像上的像素坐标y分量
                x: 114.40228934952393, // 控制点的地理坐标x分量
                y: 30.466407142080268, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP19', // 控制点标识
                description: '花园外道路5', // 控制点描述
                pixelX: 261.12, // 控制点在图像上的像素坐标x分量
                pixelY: 244.82218666666662, // 控制点在图像上的像素坐标y分量
                x: 114.402354530087, // 控制点的地理坐标x分量
                y: 30.466455553818882, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
              {
                id: 'GCP20', // 控制点标识
                description: '道路叉口', // 控制点描述
                pixelX: 372.47999999999996, // 控制点在图像上的像素坐标x分量
                pixelY: 450.0795733333333, // 控制点在图像上的像素坐标y分量
                x: 114.40197627221453, // 控制点的地理坐标x分量
                y: 30.46673837176252, // 控制点的地理坐标y分量
                z: 0, // 控制点的地理坐标的高程
              },
            ],
          },
          // 相机内外参数（预留，用于实现通过相机参数配准）
          cameraParam: {
            cameraPosition: ['x', 'y', 'z'], // 相机位置
            // 相机姿态
            orientation: {
              heading: '', // 方向角
              pitch: '', // 俯仰角
              roll: '', // 滚动角
            },
            hFOV: '', // 水平视场角
            vFOV: '', // 垂直视场角
          },
        },
        version: '', // 元数据的版本，用于实现版本的兼容。
      }
    },

    initMockData() {
      this.mockData = {
        videoID: 'dyzc',
        videoName: '存储_大姚新街乡页岩砖厂',
        videoSource: {
          protocol: 'mp4',
          videoUrl:
            'http://13.11.100.22:8888/onemap/zrzy-om-docmanage/client/download?id=65445c898e50fd3a3467536c&dburl=mongodb://gtkj:gtkj@13.11.100.22:27017/gtkj&fullfilename=uav存储_大姚新街乡页岩砖厂.mp4',
        },
        videoRegistrationParam: {
          calibrationParam: {
            groundControlPointList: [
              {
                id: 'dyzc1',
                description: 'dyzc1',
                pixelX: 584.2307692307693,
                pixelY: 136.92307692307693,
                x: 101.27344090567006,
                y: 25.779897969439823,
                z: 1901.512619015045,
              },
              {
                id: 'dyzc2',
                description: 'dyzc2',
                pixelX: 536.5384615384615,
                pixelY: 121.53846153846155,
                x: 101.27372243217445,
                y: 25.781004218372658,
                z: 1902.8683587587172,
              },
              {
                id: 'dyzc3',
                description: 'dyzc3',
                pixelX: 216.53846153846155,
                pixelY: 300,
                x: 101.27315078097651,
                y: 25.7797590056163,
                z: 1890.9370678520927,
              },
              {
                id: 'dyzc4',
                description: 'dyzc4',
                pixelX: 48.84615384615385,
                pixelY: 366.1538461538462,
                x: 101.27311307262487,
                y: 25.779597012827832,
                z: 1892.840844767824,
              },
              {
                id: 'dyzc5',
                description: 'dyzc5',
                pixelX: 158.0769230769231,
                pixelY: 266.1538461538462,
                x: 101.2731048096988,
                y: 25.77975801659298,
                z: 1892.520104631749,
              },
              {
                id: 'dyzc6',
                description: 'dyzc6',
                pixelX: 261.1538461538462,
                pixelY: 256.92307692307696,
                x: 101.27315549171144,
                y: 25.779937606692734,
                z: 1889.6929276986584,
              },
              {
                id: 'dyzc7',
                description: 'dyzc7',
                pixelX: 585.7692307692308,
                pixelY: 250.76923076923077,
                x: 101.27344804383007,
                y: 25.779897349678166,
                z: 1890.0091186320863,
              },
              {
                id: 'dyzc8',
                description: 'dyzc8',
                pixelX: 588.8461538461539,
                pixelY: 193.84615384615387,
                x: 101.27344933179138,
                y: 25.779899813055373,
                z: 1896.4628282647811,
              },
              {
                id: 'dyzc9',
                description: 'dyzc9',
                pixelX: 291.92307692307696,
                pixelY: 80,
                x: 101.27329550120736,
                y: 25.781088185877525,
                z: 1916.9616157822536,
              },
              {
                id: 'dyzc10',
                description: 'dyzc10',
                pixelX: 211.92307692307693,
                pixelY: 244.61538461538464,
                x: 101.27313388924331,
                y: 25.779768687742582,
                z: 1893.8370205661065,
              },
              {
                id: 'dyzc11',
                description: 'dyzc11',
                pixelX: 530.3846153846154,
                pixelY: 186.15384615384616,
                x: 101.27356396749634,
                y: 25.78046583738053,
                z: 1889.9307012858862,
              },
            ],
          },
          cameraParam: {
            cameraPosition: ['x', 'y', 'z'],
            orientation: {
              heading: '',
              pitch: '',
              roll: '',
            },
            hFOV: '',
            vFOV: '',
          },
          version: '',
        },
        position: [101.2737, 25.7808],
      }
    },

    addVideoArea() {
      this.videoMapView.on(Zondy.Enum.ViewEventType.loaded, () => {
        // 加载完后执行
        const video = document.getElementById('video')
        let videoEleWidth = video.clientWidth
        let videoEleHeight = video.clientHeight

        console.log('video.videoWidth', video.videoWidth)
        console.log('video.videoHeight', video.videoHeight)
        console.log('video.clientWidth', video.clientWidth)
        console.log('video.clientHeight', video.clientHeight)

        const xScale = video.videoWidth / video.clientWidth
        const yScale = video.videoHeight / video.clientHeight

        video.addEventListener('click', event => {
          // 当视频播放时，计算出视频相对于画布的位置
          const rect = video.getBoundingClientRect()
          const x = event.clientX - rect.left // 点击位置相对于视频的x坐标
          const y = event.clientY - rect.top // 点击位置相对于视频的y坐标

          // pixel[0] 是红色分量, pixel[1] 是绿色分量, pixel[2] 是蓝色分量, pixel[3] 是透明度
          console.log(x * xScale, y * yScale)
        })

        // 视频像素坐标转地理坐标
        let geoCoord1 = this.pixelCoordToGeoCoord(0, 0)
        let geoCoord2 = this.pixelCoordToGeoCoord(videoEleWidth, 0)
        let geoCoord3 = this.pixelCoordToGeoCoord(videoEleWidth, videoEleHeight)
        let geoCoord4 = this.pixelCoordToGeoCoord(0, videoEleHeight)
        let positions = [
          Cesium.Cartesian3.fromDegrees(geoCoord1.coordinates[0], geoCoord1.coordinates[1], 1),
          Cesium.Cartesian3.fromDegrees(geoCoord2.coordinates[0], geoCoord2.coordinates[1], 1),
          Cesium.Cartesian3.fromDegrees(geoCoord3.coordinates[0], geoCoord3.coordinates[1], 1),
          Cesium.Cartesian3.fromDegrees(geoCoord4.coordinates[0], geoCoord4.coordinates[1], 1),
          Cesium.Cartesian3.fromDegrees(geoCoord1.coordinates[0], geoCoord1.coordinates[1], 1),
        ]
        // 绘制虚线
        this.addRectangleTrailPolyline(positions)
      })
    },

    pixelCoordToGeoCoord(x, y) {
      let geoCoord = this.videoMapView.pixelCoordToGeoCoord(new Zondy.Geometry.Point({ coordinates: [x, y] }))
      return geoCoord
    },

    // 绘制虚线
    addRectangleTrailPolyline(positions) {
      console.log('addRectangleTrailPolyline', positions)
      this.graphicsLayer = new Cesium.GraphicsLayer(window.component.viewer, {})
      window.component.viewer.entities.add({
        name: 'Blue dashed line',
        polyline: {
          positions: positions,
          width: 4,
          material: new Cesium.PolylineDashMaterialProperty({
            color: Cesium.Color.CYAN,
          }),
          clampToGround: true,
          classificationType: Cesium.ClassificationType.BOTH,
        },
      })
    },

    handleChange(value) {
      this.currentType = value
    },

    // 草图编辑，绘制点
    startDrawPointOfVideo() {
      // layer.msg("左键选点绘制");
      this.videoSketchEditor.start(Zondy.Enum.SketchDataType.POINT)
      // 设置样式
      this.setSketchStyleOfPoint()
    },

    // 设置视频地图草图编辑样式
    setSketchStyleOfPoint() {
      let vertexStyle = new Zondy.Symbol.SimpleMarkerSymbol({
        color: new Zondy.Color(241, 188, 0, 0.5),
        size: 5,
        outline: new Zondy.Symbol.SimpleLineSymbol({
          color: new Zondy.Color(241, 188, 0, 1),
          width: 0,
        }),
      })
      let sketchStyle = new Zondy.SketchStyle({
        vertexStyle: vertexStyle,
      })
      this.videoSketchEditor.setSketchStyle(sketchStyle)
    },

    // 草图编辑，绘制线
    startDrawLineOfVideo() {
      // layer.msg("左键选点绘制，双击结束");
      this.videoSketchEditor.start(Zondy.Enum.SketchDataType.POLYLINE)
      // 设置样式
      this.setSketchStyleOfLineString()
    },

    // 设置视频地图草图编辑样式
    setSketchStyleOfLineString() {
      let lineStyle = new Zondy.Symbol.SimpleLineSymbol({
        color: new Zondy.Color(157, 70, 254, 0.5),
        width: 2,
      })
      let sketchStyle = new Zondy.SketchStyle({
        lineStyle: lineStyle,
        isShowSegmentLength: true,
      })
      this.videoSketchEditor.setSketchStyle(sketchStyle)
    },

    // 草图编辑，绘制区
    startDrawPolygonOfVideo() {
      // layer.msg("左键选点绘制，双击结束");
      this.videoSketchEditor.start(Zondy.Enum.SketchDataType.POLYGON)
      // 设置样式
      this.setSketchStyleOfPolygon()
    },

    // 设置视频地图草图编辑样式
    setSketchStyleOfPolygon() {
      let fillStyle = new Zondy.Symbol.SimpleFillSymbol({
        color: new Zondy.Color(190, 45, 140, 0.1),
        outline: new Zondy.Symbol.SimpleLineSymbol({
          color: new Zondy.Color(190, 45, 140, 1),
          width: 1,
        }),
      })
      let sketchStyle = new Zondy.SketchStyle({
        fillStyle: fillStyle,
        isShowSegmentLength: true,
        isShowArea: false,
      })
      this.videoSketchEditor.setSketchStyle(sketchStyle)
    },

    // 完成草图编辑
    finishEditor() {
      // 获得草图编辑的geometry
      let geometry = this.videoSketchEditor.getGeometry()

      const video = document.getElementById('video')

      const xScale = video.videoWidth / video.clientWidth
      const yScale = video.videoHeight / video.clientHeight

      console.log(geometry.coordinates[0], geometry.coordinates[1])
      console.log(geometry._pixelCoords.x * xScale, geometry._pixelCoords.y * yScale)

      let sketchDataType = this.videoSketchEditor.getSketchDataType()
      // 获取草图编辑样式，只能获取当前正在编辑中的style，再在地图上增加对应的点、线、区
      let sketchStyle = this.videoSketchEditor.getSketchStyle()
      if (geometry) {
        switch (sketchDataType) {
          case Zondy.Enum.SketchDataType.POINT:
            this.addFeature(geometry, sketchStyle.vertexStyle)
            break
          case Zondy.Enum.SketchDataType.POLYLINE:
            this.addFeature(geometry, sketchStyle.lineStyle)
            break
          case Zondy.Enum.SketchDataType.POLYGON:
            this.addFeature(geometry, sketchStyle.fillStyle)
            break
          default:
            break
        }
      }
      // 结束草图编辑
      this.videoSketchEditor.stop()
    },

    // 添加点、线、面要素
    addFeature(geometry, symbol) {
      // 创建要素
      let feature = new Zondy.Feature({
        //构建几何
        geometry: geometry,
        //设置样式
        symbol: symbol,
      })
      // 添加要素图层
      // this.$store.dispatch('map/setGeoJsonBaseUrl', feature).then(() => {
      //   this.$store.dispatch('map/setGeoJsonShow', true)
      // })

      console.log('feature', geometry, feature)
      if (geometry) {
        switch (geometry.type) {
          case 'Polygon':
            this.$map3DUtils.addPolygon(geometry.coordinates, { extrudedHeight: 30 }, window.component.viewer)
            break
          case 'LineString':
            this.$map3DUtils.addPolyline(geometry.coordinates, {}, window.component.viewer)
            break
          case 'Point':
            this.$map3DUtils.addPoint(geometry.coordinates[0], geometry.coordinates[1], 0, {}, window.component.viewer)
            break
          default:
            break
        }
      }

      // this.graphicsLayer.add(feature)
      // 添加视频要素
      this.videoMapView.graphics.add(feature)
    },

    // 地图调绘添加点
    startAddPointOfMap() {
      const _this = this
      this.drawElement.startDrawingMarker({
        addDefaultMark: true,
        color: new Cesium.Color(0.5, 0.2, 0.8, 1.0),
        callback: function (result) {
          let tempPoint = Cesium.Cartographic.fromCartesian(result.position)
          let long = Cesium.Math.toDegrees(tempPoint.longitude)
          let lat = Cesium.Math.toDegrees(tempPoint.latitude)
          console.log('x:', long, '  y:', lat)
          let spot = [long, lat, 0]
          let geometry = new Zondy.Geometry.Point({
            coordinates: spot,
          })
          let symbol = new Zondy.Symbol.SimpleMarkerSymbol({
            color: new Zondy.Color(241, 188, 0, 0.5),
            size: 5,
            outline: new Zondy.Symbol.SimpleLineSymbol({
              color: new Zondy.Color(241, 188, 0, 0.5),
              width: 0,
            }),
          })
          _this.addFeature(geometry, symbol)
          _this.drawElement.stopDrawing()
        },
      })
    },

    // 地图调绘添加线
    startAddLineOfMap() {
      const _this = this
      this.drawElement.startDrawingPolyline({
        width: 2,
        color: new Cesium.Color(157 / 255, 70 / 255, 254 / 255, 1.0),
        callback: function (result) {
          let positions = result.positions
          let lineSpots = []
          for (let i = 0; i < positions.length; i++) {
            let tempPoint = Cesium.Cartographic.fromCartesian(positions[i])
            let long = Cesium.Math.toDegrees(tempPoint.longitude)
            let lat = Cesium.Math.toDegrees(tempPoint.latitude)
            let spot = [long, lat]
            lineSpots.push(spot)
            console.log('long:', long, '  lat:', lat, '  height:', tempPoint.height)
          }
          let geometry = new _this.Zondy.Geometry.LineString({
            coordinates: lineSpots,
          })
          let symbol = new _this.Zondy.Symbol.SimpleLineSymbol({
            color: new _this.Zondy.Color(157, 70, 254, 1),
            width: 2,
          })
          _this.addFeature(geometry, symbol)
          _this.drawElement.stopDrawing()
        },
      })
    },

    // 地图调绘添加区
    startAddPolygonOfMap() {
      const _this = this
      this.drawElement.startDrawingPolygon({
        color: new Cesium.Color(190 / 255, 45 / 255, 140 / 255, 0.5),
        callback: function (result) {
          let positions = result.positions
          let polygonSpots = []
          for (let i = 0; i < positions.length; i++) {
            let tempPoint = Cesium.Cartographic.fromCartesian(positions[i])
            let long = Cesium.Math.toDegrees(tempPoint.longitude)
            let lat = Cesium.Math.toDegrees(tempPoint.latitude)
            let spot = [long, lat]
            polygonSpots.push(spot)
            console.log('long:', long, '  lat:', lat, '  height:', tempPoint.height)
          }
          let geometry = new Zondy.Geometry.Polygon({
            coordinates: [polygonSpots],
          })
          let symbol = new Zondy.Symbol.SimpleFillSymbol({
            color: new Zondy.Color(190, 45, 140, 0.5),
            outline: new Zondy.Symbol.SimpleLineSymbol({
              color: new Zondy.Color(190, 45, 140, 0.5),
              width: 1,
            }),
          })
          _this.addFeature(geometry, symbol)
          _this.drawElement.stopDrawing()
        },
      })
    },

    // 删除视频地图视图中所有的geometry
    clearAllGeoMetry() {
      let items = this.videoMapView.graphics.items
      while (items.length > 0) {
        this.videoMapView.graphics.remove(items[0])
      }
    },

    // 清除所有
    clearAll() {
      // 删除视频地图视图中所有的geometry
      this.clearAllGeoMetry()
      // 清除地图图层
      // this.$store.commit('map/SET_GEOJSON_URL', [])
      // this.$store.commit('map/SET_GEOJSON_SHOW', false)
      // this.$map3DUtils.removeAllEntity()
      this.$map3DUtils.removeEntityByName('polygon')
      this.$map3DUtils.removeEntityByName('polyline')
      this.$map3DUtils.removeEntityByName('point')
    },
  },
}
</script>

<style lang="scss" scoped>
#videoDraw {
  position: relative;
  z-index: 3;
  .goBtn {
    position: absolute;
    top: calc(#{$headerHeight} + 10px);
    left: 10px;
  }
  .selectType {
    background: rgba($color: #12305c, $alpha: 0.6);
    padding: 16px;
    position: absolute;
    right: 20px;
    top: calc(#{$headerHeight} + 20px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    .ant-btn {
      margin-left: 5px;
      margin-top: 10px;
    }
  }
  #videoMapView-container {
    width: 770px;
    height: 440px;
    position: fixed;
    right: 0px;
    bottom: 0px;
    border: 2px solid #89898a;
  }
}
</style>
